<script setup lang="ts">
const swiper = useSwiper();
</script>

<template>
  <div class="swiper-nav">
    <div class="swiper-nav-content">
      <div class="swiper-nav-prev" @click="swiper.slidePrev()">
        <img
          class="swiper-nav-icon-black"
          style="transform: rotate(180deg)"
          src="~/assets/icons/more_right_black.png"
        />
        <img
          class="swiper-nav-icon-white"
          style="transform: rotate(180deg)"
          src="~/assets/icons/more_right_white.png"
        />
      </div>
      <div class="swiper-nav-next" @click="swiper.slideNext()">
        <img class="swiper-nav-icon-white" src="~/assets/icons/more_right_white.png" />
        <img
          class="swiper-nav-icon-black"
          src="~/assets/icons/more_right_black.png"
        />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.swiper-nav {
  width: 24rem;
  margin-top: 4rem;
  display: flex;
  justify-content: space-between;
  margin: 0.55rem auto 0 auto;
  top: 0;
  left: 0;
  z-index: 9;
  .swiper-nav-content {
    > div {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 0.67rem;
      height: 0.67rem;
      background: #ffffff;
      opacity: 1;
      border: 0.01rem solid #e9e9e9;
      border-radius: 100%;
      cursor: pointer;
      &:hover {
        box-shadow: 0rem 0.05rem 0.19rem 0.01rem rgba(0, 0, 0, 0.08);
        background: linear-gradient(132deg, #2e6aff 0%, #47ffda 100%);
        .swiper-nav-icon-black {
          display: none;
        }
        .swiper-nav-icon-white {
          display: inline-block;
        }
      }
      img {
        user-select: none;
        width: 0.08rem;
        height: 0.15rem;
      }
      .swiper-nav-icon-white{
        display: none;
      }
    }
  }

  .swiper-nav-prev {
    position: absolute;
    left: 0.81rem;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 9;
  }
  .swiper-nav-next {
    position: absolute;
    left: 22.4rem;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 9;
  }
}
</style>
